<script setup>
import { ref } from 'vue'
import Modal from '@/components/Modal.vue'
import AntIcon from '@/components/AntdIcon/index.vue'
import { updateProjectApi } from '@/service'

const emit = defineEmits(['addProcess'])
const modalRef = ref()
const formRef = ref()
const formData = ref({
  project_id: '',
  project_title: '', // 项目标题
  project_intro: '', // 项目简介
  project_image_url_1: '', // 项目图片1
  project_image_url_2: '', // 项目图片2
  project_handle_cycle: '', // 办理周期
  project_obtain_identity: '', // 获得身份
  project_asset_requirements: '', // 资产要求
  project_apply_conditions: '', // 申请条件
  project_apply_process: [], // 申请流程
  is_hot: 1, // 是否热门 0.否 1.是
  project_area_id: null, // 项目地区id
})

const process = ref([
  {
    title: '',
    content: '',
  },
])

const actionsProcess = (type, index) => {
  if (type === 'add') {
    process.value.push({
      title: '',
      content: '',
    })
  } else {
    process.value.splice(index, 1)
  }
}

const submit = () => {
  formRef.value.validate().then(() => {
    const params = {
      ...formData.value,
      project_apply_process: process.value,
    }
    updateProjectApi(params).then(() => {
      emit('addProcess')
      close()
    })
  })
}

const open = (params) => {
  if (params) {
    formData.value = params
    if (formData.value.project_apply_process.length) {
      process.value = [...formData.value.project_apply_process]
    }
  }
  modalRef.value.open()
}

const close = () => {
  process.value = [
    {
      title: '',
      content: '',
    },
  ]
  formRef.value.resetFields()
  modalRef.value.close()
}

defineExpose({
  open,
  close,
})
</script>
<template>
  <Modal ref="modalRef" title="申请流程" @cancel="close">
    <a-form ref="formRef" :model="process" autocomplete="off">
      <div class="flex gap-3" v-for="(item, index) in process" :key="'process' + index">
        <div class="leading-8">流程-{{ index + 1 }}</div>
        <a-form-item
          label="标题"
          :name="[index, 'title']"
          :rules="[{ required: true, message: '请输入标题' }]"
          class="flex-2"
        >
          <a-input v-model:value="item.title" placeholder="请输入标题" />
        </a-form-item>
        <a-form-item
          label="内容"
          :name="[index, 'content']"
          :rules="[{ required: true, message: '请输入内容' }]"
          class="flex-3"
        >
          <a-textarea v-model:value="item.content" placeholder="请输入内容" style="height: 32px" />
        </a-form-item>
        <div
          class="h-8 leading-8 cursor-pointer hover:text-[var(--color)]"
          :class="{ 'text-red-500': index !== 0 }"
        >
          <AntIcon
            :icon="index === 0 ? 'PlusCircleFilled' : 'MinusCircleFilled'"
            @click="actionsProcess(index === 0 ? 'add' : 'remove', index)"
          />
        </div>
      </div>
      <div class="flex justify-end gap-5">
        <a-button type="primary" @click="submit">提交</a-button>
        <a-button @click="close">取消</a-button>
      </div>
    </a-form>
  </Modal>
</template>
